<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>倒计时插件</title>
    <meta name="author" content="刘雅茜">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script src="jquery.knob.min.js"></script>
    <script src="jquery.ba-throttle-debounce.min.js"></script>
    <script src="jquery.redcountdown.js"></script>
</head>

<body style="width: 1000px;margin: 0 auto;">
    <div id="rC_PA" class="redCountdownDemo"></div>
    <div id="rC_B" style="background: #222;border: 1px solid #000;" class="redCountdownDemo"></div>
    <h1><a href="样式查看.html" target="_blank">简单的样式写法Demo</a></h1>
    <h1><a href="knob旋钮Demo.html" target="_blank">knob旋钮Demo</a></h1>
    <pre style="border: 1px solid #ccc">        
    引入javascript文件：
        &lt;script src="jquery.knob.min.js"&gt;&lt;/script&gt;
        &lt;script src="jquery.ba-throttle-debounce.min.js"&gt;&lt;/script&gt;
        &lt;script src="jquery.redcountdown.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
    </pre>
</body>
<script type="text/javascript">
    // 简单快速的写法
    $('#rC_PA').redCountdown({
        /**
         * "flat-colors" 
         * "flat-colors-fat"
         * "flat-colors-very-fat"
         * "flat-colors-black"
         * "white"
         * "white"
         * "white-fat"
         * "white-very-fat"
         * "white-black"
         * "black"
         * "black-fat"
         * "black-black"
        */
        preset: "flat-colors-black",end: $.now() + 100
    });


    // 自定义写法
    $('#rC_B').redCountdown({
         //  对提示信息的设置
        labelsOptions: {
            lang: { 
                days: '天',
                hours: '时',
                minutes: '分',
                seconds: '秒'
             },
            style: 'font-size:0.5em; text-transform:uppercase;'
        },

        now: '0',// 设置当前时间
        end: '200',// 设置结束时间
        // end: $.now() + 10, // 另一种方式,表示倒计时10秒

        labels: true,// 显示提示信息 ，false表示不显示

        style: {
            element: "",
            textResponsive: .5,// 字体大小

            //  days
            daysElement: {
                gauge: {
                    thickness: .03,// 动态计时圈的粗细
                    bgColor: "rgba(255,255,255,0.05)",// 背景色
                    fgColor: "#1abc9c",// 前景色
                    lineCap: 'round'// 动态圈的样式为圆滑
                },
                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'// 字体样式
            },

            // hours
            hoursElement: {
                gauge: {
                    thickness: .03,
                    bgColor: "rgba(255,255,255,0.05)",
                    fgColor: "#2980b9"
                },
                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
            },

            // minutes
            minutesElement: {
                gauge: {
                    thickness: 1.03,
                    bgColor: "rgba(255,255,255,0.05)",
                    fgColor: "#8e44ad"
                },
                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
            },

            // seconds
            secondsElement: {
                gauge: {
                    thickness: .13,
                    bgColor: "rgba(255,255,255,0.05)",
                    fgColor: "#f39c12",
                    lineCap: 'round'
                },
                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
            }
        },
        // 当计时结束后要执行的函数
        onEndCallback: function () { console.log("Time out!"); }
    });

</script>

</html>
<!--

    [knob.js]:
        使用canvas帮助我们生成超酷的旋钮特效，
        你可以使用插件选项或者HTML5的data属性来自定义设置插件属性
    链接：http://www.jq22.com/jquery-info392

    [ba-throttle-debounce.min.js]:
        throttle：函数调用的频度控制器，是连续执行时间间隔控制
        debounce：空闲时间必须大于或等于 一定值的时候，才会执行调用方法

    [redcountdown.js]:
        是一个圆形计时器 与 ba-throttle-debounce.min.js 搭配使用
        链接：https://codecanyon.net/item/redcountdown-circular-countdown/9375050
-->